<template>
	<view class="grid-body content-box">
		<view class="info flex">
			<image src="/static/images/training-tasks/training.png" />
			<view class="ml-20 info-right">
				<view class="title">{{ data.trainName }}</view>
				<view class="my-10 font-12 color-BBBBBB">学时：{{data.trainDurationLabel}}
				</view>
				<view class="my-10 font-12 color-BBBBBB">已学：{{data.trainLearnedDurationLabel}}
				</view>
				<view class="submit" @click.stop="handleClick()">{{data.courseStatus === '1'?'开始培训':'继续培训'}}</view>
			</view>
		</view>
		<view class="footer">
			<view class="my-10 font-12 color-BBBBBB">
				<text>培训时间：</text>
				<uni-dateformat :date="data.trainStartTime" format="yyyy/MM/dd hh:mm" />
				<text style="margin: 0 5px">-</text>
				<uni-dateformat :date="data.trainEndTime" format="yyyy/MM/dd hh:mm" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'train-list-item',

		components: {},

		/**
		 * {
		 *  title: 培训名称
		 *  src: 培训封面图
		 *  startTime：开始时间
		 *  endTime: 结束时间
		 * }
		 */
		props: {
			data: {
				type: Object,
				default: () => {}
			},
		},

		data() {
			return {}
		},

		computed: {},

		watch: {},

		created() {},

		mounted() {},

		destroyed() {},

		methods: {
			handleClick() {
				this.$emit('click')
			},
		}
	}
</script>

<style scoped lang="scss" type="text/scss">
	.content-box {
  position: relative;
  margin-bottom: 40rpx;
  > image {
    width: 240rpx;
    height: 150rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    flex-shrink: 0;
  }
  .progress {
    margin-top: 20rpx;
    width: 400rpx;
  }
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  @include text-overflow-ellipsis(2)
}
.tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100rpx;
  height: 40rpx;
  border-radius: 10rpx 0rpx 34rpx 0rpx;
  color: #fff;
  line-height: 40rpx;
  text-align: center;
}
//.color-A14430
.bc-a14430 {
  background: #a14430;
}
.bc-88C49C {
  background: #88c49c;
}
.content-box {
  margin-bottom: 30rpx;
  padding: 30rpx 30rpx 20rpx 30rpx;

  .info {
    position: relative;
    justify-content: space-between;
    align-items: center;
  }
  .info-right {
    flex: 1;
    height: 150rpx;
  }
  image {
    width: 150rpx;
    height: 150rpx;
  }
  .title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;				//溢出内容隐藏
    text-overflow: ellipsis;		//文本溢出部分用省略号表示
    display: -webkit-box;			//特别显示模式
    -webkit-line-clamp: 2;			//行数
    line-clamp: 2;
    -webkit-box-orient: vertical;	//盒子中内容竖直排列
    word-break:break-all;
  }
  .time {
    font-size: 26rpx;
    color: #999999;
    font-weight: 400;
    margin-top: 10rpx;
  }
  .submit {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    line-height: 50rpx;
    height: 50rpx;
    font-size: 28rpx;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    background: #c4c088;
    padding: 0 24rpx;

		&.disabled {
			background: #ccc;
		}
  }
  .footer {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}

</style>